<template>
<div class="big_left-1">
  <blockTitle title="钻井工程"></blockTitle>
  <div class="main">
    <div class="main-top">
      <div class="main-top-1" v-for="(item, index) in dataList">
        <div class="top-1-top">
          <span class="num">{{ item.num }}</span>{{item.unit}}
        </div>
        <div>{{ item.name }}</div>
      </div>
    </div>
    <div class="main-bottom" id="chart1"></div>
  </div>
</div>
</template>

<script>
import blockTitle from './big-title'
export default {
  name: "left-1",
  components: {
    blockTitle
  },
  data() {
    return {
      dataList: [
        {
          name: '动用机组',
          unit: '部',
          num: 105
        },
        {
          name: '开钻',
          unit: '口',
          num: 103
        },
        {
          name: '二开',
          unit: '口',
          num: 305
        },
        {
          name: '打开油气层',
          unit: '部',
          num: 105
        },
        {
          name: '完钻',
          unit: '口',
          num: 160
        }
      ],
      xAxisData: ['苏6-苏36-11','苏54','苏14、桃2','苏东41-33','苏东','苏47、苏48']
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let chartDom = document.getElementById('chart1')
      let myChart = this.$echarts.init(chartDom)
      myChart.setOption(
        {
          title: {
            text: '',
            textStyle: {
              // color: '#fff',
              fontSize: 12,
              fontWeight: 400,
              fontFamily: 'Microsoft YaHei'
            }
          },
          grid: {
            top: '13%',
            left: '2%',
            right: '3%',
            bottom: '2%',
            containLabel: true
          },
          legend: {
            x: 'right',      //可设定图例在左、右、居中
            y: 'top',     //可设定图例在上、下、居中
            padding: [10, 10, 0, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            show: true,
            //legend横向显示
            // orient: 'vertical',
            textStyle: {
              color: 'auto'
            }
          },
          tooltip: {
            // backgroundColor: 'rgba(65,114,231,0.8)',
          },
          xAxis: {
            show:true,
            type: 'category',
            data: this.xAxisData,
            splitLine: {
              show: false
            },
            position: 'bottom',
            axisLabel: {
              show: true,
              interval: 0,
              fontSize: 10,
              textStyle: {
                color: '#00BAFF',
                // fontSize: '10'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#00BAFF'
              }
            },
          },
          yAxis: {
            show:true,
            // offset:0,					//---y轴相对于默认位置的偏移
            // type:'value',			//---轴类型，默认'category'
            // name:'迟报数量',
            axisLabel: {
              show: true,
              fontSize: 10,
              textStyle: {
                color: '#00BAFF'
              }
            },
            //---坐标轴 刻度
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              textStyle: {
                color: '#007EFF'
              },
              lineStyle: {
                color: '#007EFF'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#E4E4E4'],
                width: 1,
                type: 'dashed'
              }
            },
          },
          series: [
            {
              name: '直立井',
              data: [150,100,120,150,120,140],
              type: 'line',
              smooth: true,
              symbol: 'circle',//拐点样式
              symbolSize: 8,//拐点大小
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,//折线宽度
                    color: "#FF801A"//折线颜色
                  },
                  color: '#FF801A',//拐点颜色
                  borderColor: '#fff',//拐点边框颜色
                  borderWidth: 1//拐点边框大小
                },
                emphasis: {
                  color: '#FF801A'//hover拐点颜色定义
                }
              },
            },
            {
              name: '水平井',
              data: [115,65,85,125,85,105],
              type: 'line',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(62,150,255, 1)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(62,150,255, 0)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
              },
              smooth: true,
              symbol: 'circle',//拐点样式
              symbolSize: 8,//拐点大小
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,//折线宽度
                    color: "#1AFFEC"//折线颜色
                  },
                  color: '#1AFFEC',//拐点颜色
                  borderColor: '#fff',//拐点边框颜色
                  borderWidth: 1, //拐点边框大小
                },
                emphasis: {
                  color: '#1AFFEC'//hover拐点颜色定义
                }
              },
            }
          ]
        }
      )
      // 让图表自适应
      window.addEventListener('resize', function () {
        myChart.resize()  // myChart 是实例对象
      })
    },
  }
}
</script>

<style scoped lang="scss">
.big_left-1 {
  height: 35%;
  .main {
    width: 100%;
    height: calc(100% - 20px);
    background: url("../../assets/images/big_left_bg.png");
    background-size: 100% 100%;
    padding: 15px;
    .main-top {
      display: flex;
      justify-content: space-around;
      .main-top-1 {
        width: 70px;
        height: 74px;
        background: url("../../assets/images/big_left1_bg.png");
        background-size: 100% 100%;
        color: #9BDEF0;
        font-size: 12px;
        text-align: center;
        .top-1-top {
          padding: 18px 0 9px 0;
        }
        .num {
          color: #00F1FF;
          font-size: 18px;
        }
      }
    }
    .main-bottom {
      width: 100%;
      height: 68%;
      margin-top: 5px;
    }
  }
}
</style>
